<template>
  <el-upload
    :action="UploadFileUrl"
    :headers="getHeader()"
    name="myUploadFile"
    list-type="picture-card"
    :file-list="imageArr"
    :auto-upload="true"
    :on-remove="handleMoreUploadRemove"
    :on-success="handleMoreUploadSuccess">
    <i slot="default" class="el-icon-plus"></i>
  </el-upload>
</template>

<script>

export default {
  name: 'MyUploadMore',
  props:{
    ImageParamsArr:{
      type:Array,
      require:false
    },
    callback:Function
  },
  mounted () {
    // this.initImageArr()
  },
  data:function () {
    return {
      type:'string',
      imageArr:[]
    }
  },
  methods:{
    handleMoreUploadRemove:function (file, fileList) {
      this.imageArr = fileList
      this.execCallBack()
    },
    handleMoreUploadSuccess:function (res) {
      if (res.code===0 && res.data && res.data.length>10){
        this.imageArr.push(this.formatImageObj(res.data))
      }
      this.execCallBack()
    },
    execCallBack:function () {
      let $this=this
      var arr=[]
      $this.imageArr.forEach(function (value,index) {
        arr.push(value.url)
      })
      this.$props.callback(arr)
    },
    setImageArr:function (tmpArr) {
      this.imageArr=this.formatImageArr(tmpArr)
    },
    initImageArr:function () {
      var tmpArr=[]
      if (this.$props.ImageParamsArr && this.$props.ImageParamsArr.length>0){
        tmpArr=this.$props.ImageParamsArr
        this.type='array'
      }
      this.imageArr=this.formatImageArr(tmpArr)
    },
    formatImageArr:function (imageArr) {
      let $this=this
      var arr=[]
      imageArr.forEach(function (value, index) {
        arr.push($this.formatImageObj(value))
      })
      return arr
    },
    formatImageObj:function (url) {
      var splitArr = url.split(".")
      var name=splitArr[splitArr.length-2]+'.'+splitArr[splitArr.length-1]
      var obj={
        name:name,
        url:url,
      }
      // imageArr.push(obj)
      return obj
    }
  }
}
</script>

<style scoped>

</style>
